<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>首页</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./lib/css/index.css">
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">英雄列表</div>
              </div>
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-9">
                  <form class="form-inline">
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-addon">英雄姓名</div>
                        <input type="text" value="" class="form-control vals" name="search" placeholder="请输入查询内容" />
                      </div>
                    </div>
                    <button type="submit" class="btn btn-default search">查找</button>
                  </form>
                </div>
                <div class="col-md-3">
                  <a href="./add.html" class="btn btn-success pull-right">新增</a>
                </div>
              </div>

              <table id="my-table" class="table table-bordered mp15">
                <thead>
                  <tr>
                    <th width="25%">头像</th>
                    <th width="25%">姓名</th>
                    <th width="25%">技能</th>
                    <th width="25%">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- <tr>
                    <td><img src="./images/盖伦.png" alt="" /></td>
                    <td>盖伦</td>
                    <td>躲草丛</td>
                    <td>
                      <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
                      <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
                    </td>
                  </tr> -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <script src="./lib/js/template-web.js"></script>
  <script src="./lib/js/lazyload.js"></script>

  <!-- 模板引擎 -->
  <script type="text/html" id="ren_list">
    {{ each data item }}
    <tr>
      <!-- 不能直接是src 需要是 lay-src -->
      <td><img lay-src="http://www.itcbc.com:8080/{{ item.avatar }}" alt="" /></td>
      <td>{{ item.name }}</td>
      <td>{{ item.skill }}</td>
      <td>
        <!-- 把当期要编辑的数据 id 借助网址栏传给编辑页面 -->
        <a href="./edit.html?id={{ item.id }}" class="btn btn-primary edit">编辑</a>
        <button class="btn btn-danger del" data-id="{{ item.id }}">删除</button>
      </td>
    </tr>
    {{ /each }}
  </script>

  <script src="./lib/js/index.js"></script>
</body>

</html>